<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并</title>
		<style>
			div#parent{
			width: 300px;
			height: 300px;
			/* 边距 */
			border: 1px solid red;
			/* 上框 加外边距 */
			margin-bottom: 40px;
		}
			div#son{
			width: 100px;
			height: 100px;
			border:1px solid red;
			/* 下框 加外边距  */
			margin-top: 100px;
			}
			/*  */
			div#parent{
			width: 300px;height: 300px;
			border: 1px solid red;
			background-color: #aaffff;
			/* 上外边距  40px */
			margin-top:98px;
			/*1.添加溢出隐藏或者auto*/
			overf low: auto;
			border: 1px solid transparent;
			padding-top: 1px;
			}
			div#son{
				width: 100px;
				height: 100px;
				background-color:#00ff00;
				/* 上外边距  100px */
				margin-top: 100px;
				}
				/*--【内部垂直合并:最大值为主】--需要填充
				解决方法:1.找到父元素，添加overflow:hidden[创建块级上下文，阻止外边距合并]
				2.找到父元素，添加border或者padding-方向,建议:透明border
		 */
		</style>
	</head>
	<body>
		<div id="parent">
		<div id="son"></div></div>
	</body>
</html>